var OrderProgressTable = function () {
  var template = /* html */ `
    <div class="order-progress-table">
      <table ref="orderTable" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th style="min-width:140px">订单编号</th>
            <th style="min-width:120px">工厂型号</th>
            <th style="min-width:120px">客户型号</th>
            <th style="min-width:80px">订单数</th>
            <th style="min-width:80px">投料数</th>
            <th style="min-width:140px">设备编号</th>
            <th style="min-width:100px">作业员</th>
            <th style="min-width:80px">加工数量</th>
            <th style="min-width:80px">开始日期</th>
            <th style="min-width:80px">结束日期</th>
            <th style="min-width:60px">状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in orderList" :key="order.id" :class="{'odd':order.rowIndex%2!==0}">
            <td>{{order.companyOrderId}}</td>
            <td>{{order.factoryId}}</td>
            <td>{{order.customerId}}</td>
            <td class="is-center no-warp">{{order.orderCount}}</td>
            <td class="is-center no-warp">{{order.feedCount}}</td>
            <td>{{order.equipmentNo}}</td>
            <td>{{order.createUser}}</td>
            <td class="is-center no-warp">{{order.count}}</td>
            <td class="is-center no-warp">{{moment(order.startTime).format('YYYY-MM-DD')}}</td>
            <td class="is-center no-warp">{{moment(order.endTime).format('YYYY-MM-DD')}}</td>
            <td class="is-center no-warp">
              <span v-if="order.status!==''" :class="'machine-status-'+order.statusCode">{{order.status}}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    props: {
      orders: {
        type: Array,
        required: true
      }
    },

    watch:{
      changeData: function (newObj, oldObj) {
        if (newObj.rowIndex === oldObj.rowIndex && newObj.rowIndex >= newObj.orders.length) {
          if (newObj.rowIndex !== 0) {
            this.rowIndex = 0;
            this.boardRunning();
            return;
          }
        }
        this.resetOrderList();
      }
    },

    computed:{
      changeData:function(){
        return {
          rowIndex: this.rowIndex,
          orders: this.orders
        };
      }
    },

    data: function () {
      return {
        orderList: this.orders,
        rowIndex: 0,
        moment: moment
      };
    },

    mounted: function () {
      this.boardRunning();

      var self = this;
      $(this.$el).resize(function () {
        self.clearTimeoutList();
        if (!self.checkRowMove()) {
          self.rowIndex = 0;
        }
        self.boardRunning();
      });
    },

    methods: {
      boardRunning: function () {
        this.clearTimeoutList();

        this.rowIndexRunning();
      },

      rowIndexRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          if (self.checkRowMove()) {
            var rowIndex = self.rowIndex;
            rowIndex++;
            if (rowIndex >= self.orders.length) {
              rowIndex = 0;
            }
            self.rowIndex = rowIndex;
          } else {
            self.rowIndex = 0;
          }

          self.timeoutList[0] = null;
          self.rowIndexRunning();
        }, 5000);
        this.timeoutList[0] = timeout;
      },

      checkRowMove: function () {
        var orderTable = this.$refs['orderTable'];
        if (orderTable === undefined) {
          return false;
        }
  
        var totalHeight = $(this.$el).height();
        var tableHeight = $(orderTable).height();
        return totalHeight < tableHeight;
      },

      resetOrderList:function(){
        var orders = this.orders;
        var rowIndex = this.rowIndex;
        if (rowIndex === 0) {
          return _.clone(orders);
        }

        var orderList = orders.slice(rowIndex);
        var orderArray = orders.slice(0, rowIndex);
        orderList.pushArray(orderArray);
        this.orderList = orderList;
      }
    },

    template: template
  };
}();
